// var
@vRecord-prefix-cls       : x-video-record;
@vRecord-bg-color         : #343434;
@vRecord-font-size        : 14px;
@vRecord-font-color       : #A5907B;
@vRecord-toolsbar-size    : 70px;
@vRecord-mask-zindex      : 1;
@vRecord-toolsbar-zindex  : 2;

// mixins
@keyframes spinner {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

// styles
.@{vRecord-prefix-cls} {
  .size(100%, 100%);
  // min-width: 400px;
  // min-height: 225px;
  font-size: @vRecord-font-size;
  color: @vRecord-font-color;
  box-shadow: 0 0 5px fade(@vRecord-bg-color, 40%);
  background-color: @vRecord-bg-color;
  overflow: hidden;
  user-select: none;
  position: relative;
  &__main {
    .absolute-fullscreen;
    .size(100%, 100%);
    .flex-center;
    video {
      display: block;
      .size(100%, 100%);
      background-color: #252525;
      box-shadow: 0 0 20px rgba(128, 128, 128, .05)
    }
  }
  &__mask {
    .absolute-fullscreen;
    z-index: @vRecord-mask-zindex;
    color: #fff;
    text-shadow: 0 0 5px #000;
    .flex-center;
    .xvu-spinner {
      opacity: .5;
      animation: spinner 4s linear infinite;
    }
  }
  &__toolsbar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: @vRecord-toolsbar-zindex;
    height: @vRecord-toolsbar-size;
    padding: @vRecord-toolsbar-size * 0.1;
    background-color: rgba(0, 0, 0, .6);
    box-shadow: 0 0 1px rgba(128, 128, 128, .15);
    overflow: hidden;
    &_left {
      float: left;
      width: 35%;
      text-align: left;
    }
    &_middle {
      float: left;
      width: 30%;
      text-align: center;
    }
    &_btn {
      display: inline-block;
      width: @vRecord-toolsbar-size * 0.8;
      height: @vRecord-toolsbar-size * 0.8;
      margin: 0 .3em;
      cursor: pointer;
      &_icon,
      &_label {
        height: @vRecord-toolsbar-size * 0.4;
        line-height: @vRecord-toolsbar-size * 0.4;
        text-align: center;
      }
      &_icon {
        font-size: @vRecord-font-size * 1.4;
      }
      &_label {
        font-size: @vRecord-font-size * 0.9;
      }
      &_onlyicon {
        height: 100%;
        border: 1px solid @vRecord-font-color;
        border-radius: 50%;
        font-size: @vRecord-font-size * 1.5;
        .flex-center;
        &.xvu-stop-fill {
          border-width: 3px;
          border-color: @danger-color;
          color: @danger-color;
          position: relative;
        }
        &.xvu-camera-fill:hover {
          color: tint(@vRecord-font-color, 30%);
          border-color: tint(@vRecord-font-color, 30%);
        }
        &.xvu-photo-fill:hover {
          border-color: tint(@vRecord-font-color, 30%);
        }
      }
      &_shoottime {
        position: absolute;
        right: 0;
        top: 0;
        transform: translateX(115%);
        height: @vRecord-toolsbar-size * 0.8;
        line-height: @vRecord-toolsbar-size * 0.8;
      }
      &:hover {
        color: tint(@vRecord-font-color, 30%);
      }
    }
    &_middle {
      .@{vRecord-prefix-cls}__toolsbar_btn {
        margin: 0 1.25em;
      }
    }
  }
  &&-error {
    video {
      background-color: @vRecord-bg-color;
      background-repeat: no-repeat;
      background-position: center center;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Ctext x='50%25' y='50%25' font-size='14' fill='%23a2a9b6' font-family='system-ui, sans-serif' text-anchor='middle' dominant-baseline='middle'%3E发生错误%3C/text%3E%3C/svg%3E");
    }
  }
}

// styles - more
